<template>
  <div class="body" v-loading="aloading">
    <div class="box">
      <p class="title_box"><span>*</span>指定收款单位：</p>
      <el-select
        @change="changeSelect"
        v-model="c_value"
        placeholder="请选择财政单位"
        size="large"
        style="flex: 1;"
      >
        <el-option
          v-for="item in list"
          :key="item.id"
          :label="item.bank_username"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="box1" v-if="public_bank">
      <p class="title">收款信息</p>
      <div>
        <p class="text1">收款单位：</p>
        <p class="text2">{{public_bank.bank_username?public_bank.bank_username:public_bank.card_name}}</p>
      </div>
      <div>
        <p class="text1">收款单位账号：</p>
        <p class="text2">{{public_bank.bank_num?public_bank.bank_num:public_bank.card_number}}</p>
      </div>
      <div v-if="public_bank.bank_name">
        <p class="text1">收款单位开户银行：</p>
        <p class="text2">{{public_bank.bank_name}}</p>
      </div>
    </div>
    <div class="box">
      <p class="title_box">备注：</p>
      <el-input style="flex: 1;" v-model="notes" type="textarea" placeholder="请输入备注"/>
    </div>


    <!-- 添加账号 -->
    <!-- <el-dialog v-if="addVisible" v-model="addVisible" :show-close="false">
      <add-public @changeSubmit="getAdd" @closeDrawer="closeDrawer"/>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref,onMounted,defineExpose } from "vue";
import { defineProps, defineEmits } from "vue";

import { getTkBank,getPublicBank } from "@/api/bond/refund";
import { getYlBank } from "@/api/bond/pay";
// import AddPublic from "./AddPublic.vue";

const props = defineProps({
  bailId: {
    type: Number,
  },
  bailInfo: {
    type: Object,
  },
});

onMounted(() => {
  getList()

  getTkBankInfo()

});

let aloading = ref(true)
let notes = ref('')
let c_value = ref('')
let public_bank = ref({})
const getTkBankInfo = async()=>{
  let data = {
    bail_id:props.bailInfo.bail_id,
    process_id:props.bailInfo.id,
  }
  await getTkBank(data).then(res=>{
    aloading.value = false
    if(res.code == 1){
      if(res.data.public_bank){
        public_bank.value = res.data.public_bank
        c_value.value = res.data.public_bank.card_id
      }
      notes.value = res.data.notes
    }
  })
}


// 公共账户
let list = ref([])
const getList =async()=>{
  await getPublicBank({step:2}).then(res=>{
    if(res.code == 1){
      list.value = res.data
    }
  })
}

// 选择公共账户
const changeSelect = (e: any)=>{
  console.log(e)
  list.value.map(item=>{
    if(item.id == e){
      public_bank.value = item
    }
  })
  console.log(public_bank.value)
}

defineExpose({
  notes,
  public_bank
})

</script>

<style lang="scss" scoped>
.body{
  margin:0 30px;
}
.title_box{
  font-size: 14px;
  color: #333333;
  font-weight: bold;
  width: 150px;
  span{
    color:#D81E06;
    margin:0 7px;
  }
}
.box{
  margin-bottom:30px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;
}
.box1{
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  margin-bottom:30px;
  .title{
    background: #EDF1F6;
    height: 39px;
    line-height: 39px;
    border-radius: 8px 8px 0px 0px;
    padding:0 14px;
    font-size: 14px;
    font-weight: bold;
  }
  div{
    display: flex;
    margin:20px 12px;
    font-size: 14px;
    color: #3D3D3D;
    .text1{
      width: 140px;
    }
  }
}
</style>
